<!--
 * @Description: 详情 弹窗
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-09-22 09:27:50
 * @LastEditors: yxx
 * @LastEditTime: 2025-05-28 09:10:06
-->
<template>
  <div class="dialog-container">
    <el-dialog :title="title" v-model="isDialog" width="700px" :close-on-click-modal="false">
      <el-row :gutter="20">
        <el-col :span="24">
          <div>操作模块：{{ detailData?.module }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>请求地址：{{ detailData?.path }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>登录信息：{{ detailData?.uid }} / {{ detailData?.ip }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>
            操作状态：
            <span :style="{ color: detailData?.result === 1 ? '#67C23A' : '#F56C6C' }">
              {{ detailData?.result === 1 ? "成功" : "失败" }}
            </span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>请求参数：</div>
          <div>{{ detailData?.request }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>返回参数：</div>
          <div>{{ detailData?.response }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>消耗时间：{{ detailData?.costTime }}ms</div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div>操作时间：{{ detailData?.dateline }}</div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ElMessage } from "element-plus"
import { SystemSpace } from "@/api/interface/system"
import { actionLogDetailApi } from "@/api/modules/system"

const title = ref<string>("日志详情")
const isDialog = ref<boolean>(false)
const detailData = ref<SystemSpace.ActionLogDetail>()
/** 弹窗 打开 */
const handleOpen = async (id: number) => {
  const res = await actionLogDetailApi({ id })
  if (res.code !== "200") return ElMessage.error("获取日志详情数据失败")
  detailData.value = res.data
  isDialog.value = true
}

defineExpose({ handleOpen })
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 10px;
}
</style>
